#include("common.html")
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>澳邮国际商城</title>
    <meta name="description" content="澳邮国际商城">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="#(tpath)/static/css/element.css">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/basic.css">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/filter.css">
    <script src="#(tpath)/static/js/jquery.js"></script>
    <script src="#(tpath)/static/js/common.js"></script>
  </head>
  
  <body class="">
	#include("header.html")
    <style type="text/css">.main_con{ background: #f6f6f6; } .allwarp .breadcrumbs { clear: both; height: 44px; line-height: 44px; color: #999; width: 1200px; margin: 0 auto; } .allwarp .clearfix { zoom: 1; } .allwarp .breadcrumbs li { float: left; font-size: 12px; } .allwarp .breadcrumbs a, .breadcrumbs a:visited { color: #737574; } .member_warp { margin-bottom: 20px; width: 100%; min-height: 680px; } .member_warp .mem_left { float: left; min-height: 1px; background-color: #fff; padding-top: 5px; margin-bottom: 25px; border-top: 3px solid #f1453b; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } .member_warp .mem_left .mlbox { padding-bottom: 15px; background: #fff; } .member_warp .mem_left .mlbox .mlhd h3.title { font-size: 14px; margin-left: 20px; line-height: 40px; color: #f1453b; } .member_warp .mem_left .mlbox .mllist { margin: 10px 0 0; padding: 0; list-style-type: none; font-size: 14px; } .member_warp .mem_left .mlbox .mllist li { position: relative; } .member_warp .mem_left .mlbox .mllist .icon1 { width: 18px; height: 22px; background-position: 0 0; } .member_warp .mem_left .mlbox .mllist .icon { background: url(#(base)/static/images/memicon.png) no-repeat; margin-left: 30px; margin-top: 8px; } .member_warp .mem_left .mlbox .mllist .icon3 { width: 18px; height: 22px; background-position: -18px 0; } .member_warp .mem_left .mlbox .mllist li a { display: block; height: 35px; line-height: 35px; color: #6d6d6d; padding-left: 10px; } .member_warp .mem_left .mlbox .mllist li.current a { color: #f1453b; } .member_warp .mem_left .mlbox .mllist .current .icon1 { width: 18px; height: 22px; background-position: 0 -43px; } .member_warp .mem_left .mlbox .mllist .current .icon3 { width: 18px; height: 22px; background-position: -18px -43px; } .member_warp .mem_left .mlbox .mllist .current .icon5 { width: 18px; height: 22px; background-position: -76px -43px; } .member_warp .mem_left .mlbox .mllist .icon5 { width: 18px; height: 22px; background-position: -76px 0; } .member_warp .mem_left .mlbox .mllist .icon6 { width: 18px; height: 22px; background-position: -152px 0; } .member_warp .mem_left .mlbox .mllist .current .icon6 { width: 18px; height: 22px; background-position: -152px -43px; } .member_warp .mem_left .mlbox .mllist .icon7 { width: 18px; height: 22px; background-position: -114px 0; } .member_warp .mem_left .mlbox .mllist .current .icon7 { width: 18px; height: 22px; background-position: -114px -43px; } .member_warp .mem_left .mlbox .mllist .icon8 { width: 18px; height: 22px; background-position: -42px -20px; } .member_warp .mem_left .mlbox .mllist .current .icon8 { width: 18px; height: 22px; background-position: -42px -60px; } .member_warp .mem_left .mlbox .mllist .icon9 { width: 18px; height: 22px; background-position: -133px 0; } .member_warp .mem_left .mlbox .mllist .current .icon9 { width: 18px; height: 22px; background-position: -133px -43px; } .member_warp .mem_right .mrcont { background: #fff; margin-left: 15px; margin-right: 15px; } .member_warp .mem_right .mrbox .mrhd1 { position: relative; padding: 10px 0px; box-sizing: border-box; } .member_warp .mem_right .mrbox .mrhd1 .title { font-weight: 400; color: #333; font-size: 16px; float: left; width: 200px; line-height: 42px; } .member_warp .mem_right .mrbox .mrhd1 .more { font-size: 12px; float: right; } .member_warp .mem_right .mrcont .mrbox .mrhd1 .more .uc-order-list-type a.current { color: #c92e2a; } .member_warp .mem_right .mrcont .mrbox .mrhd1 .more .uc-order-list-type .sep { margin: 0 15px; } .member_warp .mem_right .mrcont .mrbox .mrhd1 .more .uc-order-list-type a { color: #333; font-size: 14px; } .member_warp .mem_right { float: left; _display: inline; min-height: 600px; padding-bottom: 100px; background: #fff; border: 1px solid #dfdfdf; } .member_warp .mem_right .mrcont .mrbox .mrbd .uc-order-list-box { border-top: 1px solid #dfdfdf; border-bottom: 0; border-right: 1px solid #dfdfdf; border-bottom: 0; border-left: 1px solid #dfdfdf; border-bottom: 0; font-size: 14px; } .member_warp .mem_right .mrcont .mrbox .mrbd .uc-order-detail-list { margin: 0; padding: 0; list-style-type: none; } .member_warp .mem_right .mrcont .uc-order-detail-item-combined .order-detail-table { width: 100%; color: #333; table-layout: auto; } .member_warp .mem_right .mrcont .uc-order-detail-item-combined .order-detail-table .column-t { border-width: 0 0 1px; } .member_warp .mem_right .mrcont .uc-order-detail-item-combined .order-detail-table .column-info { height: 41px; font-weight: 400; text-align: left; background: #fafafa; } .member_warp .mem_right .mrcont .uc-order-detail-item-combined .order-detail-table th { padding: 0; border: 1px solid #dfdfdf; } .member_warp .mem_right .mrcont .uc-order-detail-item-combined .order-detail-table .column-info .column-content { position: relative; height: 21px; padding: 10px 20px; } .member_warp .mem_right .mrcont .uc-order-detail-item-combined .order-detail-table .column-l { border-left: 0; } .member_warp .mem_right .mrcont .uc-order-detail-item-combined .order-detail-table .column-delivery { position: relative; width: 120px; text-align: center; } .member_warp .mem_right .mrcont .uc-order-detail-item-combined .order-detail-table td { padding: 0; border: 1px solid #dfdfdf; } .member_warp .mem_right .mrcont .uc-order-detail-item-combined .order-detail-table .column-delivery .order-status { color: #ca3425; } .member_warp .mem_right .mrcont .uc-order-detail-item-combined .order-detail-table td { padding: 0; border: 1px solid #dfdfdf; } .member_warp .mem_right .mrcont .uc-order-detail-item-combined .order-detail-table .order-goods-list { margin: 0; padding: 10px 18px; list-style-type: none; } .allwarp .clearfix { zoom: 1; } .member_warp .mem_right .mrcont .uc-order-detail-item-combined .order-detail-table .order-goods-list li { float: left; _display: inline; margin: 10px; } .member_warp .mem_right .mrcont .uc-order-detail-item-combined .order-detail-table .order-goods-list .goods-thumb { width: 60px; height: 60px; border: 1px solid #dfdfdf; } .member_warp .mem_right .mrcont .mrbox img { max-width: 100%; } .detailtable ul li img { width: 70px; height: 70px; margin: 14px 0 0 16px; float: left; } .member_warp .mem_right .mrcont .uc-order-detail-item-combined .order-detail-table .column-price { width: 119px; padding: 20px 0 20px; text-align: center; line-height: 20px; font-size: 14px; } .member_warp .mem_right .mrcont .uc-order-detail-item-combined .order-detail-table td { padding: 0; border: 1px solid #dfdfdf; } .member_warp .mem_right .mrcont .uc-order-detail-item-combined .order-detail-table .column-action { width: 160px; text-align: center; } .member_warp .mem_right .mrcont .uc-order-detail-item-combined .order-detail-table .column-price{ width: 150px; text-align: center; } .member_warp .mem_right .mrcont .uc-order-detail-item-combined .order-detail-table .order-action a { display: block; margin: 0 auto; font-size: 12px; } .layui-btn, .layui-inline, img { vertical-align: middle; } .member_warp
      .mem_right .mrcont .maddress { width: 100%; border-collapse: collapse; } .member_warp .mem_right .mrcont .maddress th { height: 35px; line-height: 35px; border-bottom: 1px solid #e5e5e5; color: #636363; font-size: 14px; font-weight: normal; background: #f5f5f5; padding: 0 10px; } .member_warp .mem_right .mrcont .maddress td { height: 54px; border-bottom: 1px solid #e6e6e6; color: #666; font-size: 12px; text-align: center; padding: 0 10px; } .member_warp .mem_right .mrcont .maddress td.products_img img { width: 50px; height: 50px; } .member_warp .mem_right .mrcont .mrbox img { max-width: 100%; } .products_img img { padding: 10px; } .mrboxInner { margin: 15px 0px; } .layui-table { width: 100%; margin: 10px 0; background-color: #fff; } table { border-collapse: collapse; border-spacing: 0; table-layout: fixed; } .layui-table thead tr { background-color: #f2f2f2; } .layui-table td, .layui-table th { padding: 9px 15px; min-height: 20px; line-height: 20px; border: 1px solid #e2e2e2; font-size: 14px; } .layui-table[lay-skin=nob] td, .layui-table[lay-skin=nob] th { border: none; } .layui-table tr { transition: all .3s; -webkit-transition: all .3s; } .addr_tr{ background-color: #f8f8f8; } .member_form_w600 { width: 600px; margin: 0 auto; font-size: 14px; } .layui-form-item { margin-bottom: 15px; clear: both; *zoom: 1; } .layui-input, .layui-textarea { display: block; width: 100%; padding-left: 10px; } .layui-input, .layui-select, .layui-textarea { height: 38px; line-height: 38px; line-height: 36px\9; border: 1px solid #e6e6e6; background-color: #fff; border-radius: 2px; } .layui-form-item:after { content: '\20'; clear: both; *zoom: 1; display: block; height: 0; } .layui-btn-normal { background-color: #1E9FFF !important; } .layui-btn { display: inline-block; height: 38px; line-height: 38px; padding: 0 18px; background-color: #009688; color: #fff; white-space: nowrap; text-align: center; border: none; border-radius: 2px; cursor: pointer; opacity: .9; filter: alpha(opacity=90); } .notice{ margin-left: 40px; width: 80%; background: #f2f2f2; padding: 10px; box-sizing: border-box; margin-top: 10px; border-radius: 5px; color: #999; font-size:12px; } .order_list_null{ padding: 50px 0; text-align: center; color: #666; font-size: 12px; border-bottom: 1px solid #f8f8f8; } .member_warp .basic-infor { height: 236px; background: #fff; border: 1px solid #dfdfdf; float: left; display: flex; margin-bottom: 20px; } .member_warp .basic-infor .basic1 { margin-top: 40px; margin-left: 13px; } .member_warp .basic-infor .basic1 .mem-infor { margin-left: 20px; margin-top: 20px; margin-right: 20px; } .member_warp .basic-infor .basic1 .mem-infor .p1 { font-size: 16px; } .member_warp .basic-infor .basic1 .mem-infor .p2 { font-size: 12px; margin-top: 10px; color: #919090; } .member_warp .basic-infor .basic2 { height: 125px; text-align: center; border-left: 1px solid #eee; margin-top: 45px; font-size: 14px; } .num-color1 { color: #fc463f; } .number { margin-top: 15px; margin-bottom: 15px; } .member_warp .basic-infor .basic2 p strong { font-size: 18px; } strong { font-weight: bold; } .member_warp .basic-infor .basic2 a { color: #666; padding: 5px 20px; border-radius: 3px; border: 1px solid #eee; margin-top: 20px; } .layui-form-label { width: 120px; float: left; display: block; padding: 9px 15px; font-weight: 400; text-align: right; } .layui-input-block { margin-left: 150px; } .layui-input-block { margin-left: 110px; min-height: 36px; } .form-control { min-width: 60px; } .form-control { display: block; min-width: 260px; height: 30px; padding: 1px 10px; font-size: 14px; line-height: 30px; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 0px; float: left; } option { font-weight: normal; display: block; white-space: pre; min-height: 1.2em; padding: 0px 2px 1px; } select.form-control { height: 34px; } .form-control { min-width: 60px; } .area3_list { float: left; width: auto; margin-right: 5px; } .form-control { display: block; min-width: 86px; height: 30px; padding: 1px 10px; font-size: 14px; line-height: 30px; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 0px; float: left; } input, select { vertical-align: middle; } button, input, optgroup, option, select, textarea { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0; } .layui-btn-normal { background-color: #1E9FFF; } .layui-btn { display: inline-block; height: 38px; line-height: 38px; padding: 0 18px; background-color: #009688; color: #fff; white-space: nowrap; text-align: center; border: none; border-radius: 2px; cursor: pointer; opacity: .9; filter: alpha(opacity=90); } .layui-btn-normal { background-color: #1E9FFF; } .layui-btn { display: inline-block; height: 38px; line-height: 38px; padding: 0 18px; background-color: #009688; color: #fff; white-space: nowrap; text-align: center; border: none; border-radius: 2px; cursor: pointer; opacity: .9; filter: alpha(opacity=90); } .member_warp .basic-infor .basic1 .mem-img img { width: 100px; height: 100px; border-radius: 100px; } .member_warp .mem_right .mem-icon li { height: 190px; float: left; text-align: center; width: 18%; } .member_warp .mem_right .mem-icon .mem-img1 { background-position: 0 0; } .member_warp .mem_right .mem-icon .mem-img { width: 118px; height: 118px; background: url(/static/pc/imgs/mem-icon.png) no-repeat; margin: 20px auto; } .member_warp .mem_right .mem-icon a { color: #999; } .member_warp .mem_right .mem-icon .mem-img2 { background-position: -119px 0; } .member_warp .mem_right .mem-icon .mem-img4 { background-position: 0 -118px; } .member_warp .mem_right .mem-icon .mem-img6 { background-position: -238px -118px; } .member_warp .mem_right .mem-icon b { font-size: 16px; color: #666; margin-top: 10px; } .member_warp .mem_right .mem-title { padding: 40px; } .text-center { text-align: center; } .member_warp .mem_right .mrcont .ui-tab { padding: 15px 0px; } .member_warp .mem_right .mrcont .ui-tab-head { position: relative; border-bottom: 2px solid #568ed8; } .member_warp .mem_right .mrcont .ui-tab-head .current { background-color: #568ed8; color: #fff; } .member_warp .mem_right .mrcont .ui-tab-head a { display: inline-block; width: 90px; height: 35px; line-height: 35px; text-align: center; background-color: #eee; color: #999; } .member_warp .mem_right .mrcont .ui-tab .cont .show { display: block; } .member_warp .mem_right .mrcont .ui-tab .cont ul { display: none; } .table_cp{ width: 100%; font-size: 14px; } .member_warp .mem_right .mrcont .ui-tab .cont .table_cp th { text-align: left; padding: 5px; color: #333; } .member_warp .mem_right .mrcont .ui-tab .cont .table_cp { width: 100%; /* margin-top: 10px; */ } .member_warp .mem_right .mrcont .ui-tab .cont .table_cp td { padding: 15px 0px; border-bottom: 1px solid #dfdfdf; color: #333; } .detailtable { width: 100%; font-size: 14px; } .detailtable .tableBox1 { border: 1px #e0e0e0 solid; width: 100%; } .tdwidth
      { width: 61%; height: 100px; border-bottom: 1px #e0e0e0 solid; } .tdwidth .downline { border-bottom: 1px #e0e0e0 solid; } .tdwidth ul li { height: 100px; } .productname { width: 403px; float: left; line-height: 22px; margin: 17px 0 0 16px; } .productname a { color: #333; } .product_num { margin-top: 17px; margin-right: 50px; } .tdwidth li:last-child { border-bottom: none; } .tdwidth .downline { border-bottom: 1px #e0e0e0 solid; } .textalign { width: 13%; text-align: center; border-left: 1px #e0e0e0 solid; border-bottom: 1px #e0e0e0 solid; } .orderprocess { border-top: 0; } .orderprocess ul { margin: 0 auto; padding-top: 30px; } .orderprocess li { float: left; margin-bottom: 35px; border-right: 1px #fff solid; } .textbgafter { background: #6fb33e; height: 20px; display: block; text-align: center; color: #fff; } .timetext { color: #868887; text-align: center; margin-top: 10px; } .textbgbefore { background: no-repeat #c3c3c3; height: 20px; display: block; text-align: center; color: #fff; } .alert_danger { padding: 15px; color: #a94442; background-color: #f2dede; border-color: #ebccd1; border: 1px solid transparent; border-radius: 4px; } .orderaddres dl.ordetail { float: left; width: 430px; } .orderaddres dl { padding: 20px; line-height: 30px; } .orderprice { border-top: 1px #e0e0e0 solid; } .orderprice .alllist { width: 280px; float: right; line-height: 30px; margin-right: 33px; margin-top: 33px; margin-bottom: 60px; } .orderprice dl dt { display: inline-block; width: 100px; text-align: right; color: #6d6d6d; } .orderprice dl dd { display: inline-block; width: 160px; text-align: right; color: #d02d2e; } .member_warp .mem_right .mem-icon .mem-img3 { background-position: -238px 0; } .member_warp .mem_right .mem-icon .mem-img5 { background-position: -119px -118px; } .member_warp .mem_left .mlbox .mllist .icon10 { width: 18px; height: 22px; background-position: -55px 0; } .member_warp .mem_left .mlbox .mllist .current .icon10 { width: 18px; height: 22px; background-position: -55px -43px; } .member_warp .mem_left .mlbox .mllist .icon11 { width: 18px; height: 22px; background-position: -21px -20px; } .member_warp .mem_left .mlbox .mllist .current .icon11 { width: 18px; height: 22px; background-position: -21px -60px; } .fav_pagination{ padding: 20px 0px; float: right; } .input_name{ width: 80%; } .pkg_item{ width: 300px; height: 120px; background-color: #fff; border: 1px solid #dfdfdf; display: flex; margin-right: 10px; float: left; } .pkg_item img{ width: 80px; height: 80px; float: left; margin: auto 10px; } .pkg_item_title{ font-weight: 600; font-size: 14px; } .pkg_item_num{ } .select_img{ width: 20px; height: 20px; margin-top:-4px; } .refund_bt{ margin-top: 20px; float:right; } .pkg-goods-img{ width: 60px; height: 60px; border: 1px solid #dfdfdf; } .sold-detail-content{ border-top: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; } .replay-me{ background-color: #67c23a; margin: 0 10px; color: #fff; font-size: 10px; padding: .2em .5em; line-height: normal; border-radius: .2em; display: inline-block; } .replay-content{ height: 300px; border: 1px solid #dfdfdf; padding: 10px; box-sizing: border-box; overflow-y: scroll; margin-top: 10px; } .replay-content_title{ text-align: center; color: #999; font-size: 14px; margin-bottom: 10px; } .replay-content::-webkit-scrollbar { display: none; //Safari and Chrome } .replay-content { -ms-overflow-style: none; //IE 10+ overflow: -moz-scrollbars-none; //Firefox } .pdts-img{ width: 270px; height: 270px; } .pdts-title{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .select_img2{ width: 18px; height: 18px; vertical-align: middle; float: left; margin-top: 10px; margin-right: 10px; } .card_img{ width: 200px; height: 200px; } .alert_card{ width: 400px; height: 40px; margin-left: 10px; float: left; } .pay_code .el-dialog--center .el-dialog__body{ text-align: center; padding: 0px 15px 20px; } .el-dialog__body{ padding: 20px; font-size: 16px; } .pop-title{ width: 100%; font-size: 18px; font-weight: 550; color: #fff; text-align: center; padding: 15px 0px; box-sizing: border-box; background-color: #4d94ec; position: relative; border-top-left-radius:9px; border-top-right-radius:9px; } .closed-icon{ position: absolute !important; top: 20px; right: 10px; z-index: 999; } .logi-card-content{ width: 100%; padding: 0px 10px 15px; box-sizing: border-box; background-color: #4d94ec; font-size: 14px; color: #fff; display: flex; } .card-img{ width: 60px; height: 60px; } .card-content-right{ flex: 1; margin-left: 10px; } .goods-title{ -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } .step-content{ width: 100%; padding: 10px 15px; box-sizing: border-box; height: 500px; background-color: #fff; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; white-space: nowrap; overflow-y: auto; -webkit-overflow-y:auto; -ms-overflow-y:auto; -moz-overflow-y:auto; } .step-content .el-steps{ display: block; } .pop-logist .el-dialog{ height: 700px; } .el-step__description{ margin-bottom: 10px; } .mrhd1 .el-input-group{ margin-left: 20px; width: 30%; } .el-collapse{ margin-top: 10px; } .mem-icon{font-size:14px;padding-left: 90px;} .old_password{ width: 500px; margin-left: 20px; } .new_password{ width: 500px; margin-left: 36px !important; } .address_title{ width: 100px; line-height: 34px; } .search_addr{ float: right; margin-right: 100px; width: 300px; } .lead_addr{ float: right; } .add_addr_title{ float:right; margin-right:10px; line-height: 35px; font-size: 16px; } .add_addr_title .el-button--danger{ margin-top: 0px; } .mrhd1 .el-input__inner{ height: 36px; line-height: 36px; } .fans_num{ font-weight: 400; color: #333; font-size: 14px; width: 600px; line-height: 20px; float: right; text-align: right; } .my_order{ font-weight: 400; color: #999; font-size: 14px; float: left; width: 120px; margin-top: 10px; } .order_title{ font-weight: 400; color: #333; font-size: 16px; float: left; width: 250px; line-height: 40px; } .dialog_addr{ width: 100%; height: 600px; font-size: 14px; white-space: nowrap; overflow-y: scroll; box-sizing: border-box; } .dialog_addr::-webkit-scrollbar { display: none; } .addr_item{ padding: 10px; box-sizing: border-box; border-bottom: 1px solid #e0e0e0; display: flex; } .addr_item_address{ flex: 1; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .addr_search{ width: 80%; float: left; margin-right: 10px; } .order_addr .el-dialog__body{ padding: 0 15px 15px; } .help_none{ padding-top: 50px; text-align: center; color: #737574; } #helphtml{line-height: 28px; font-size: 14px; color: #333;} .help_title{ text-align: center; font-weight: bold; font-size: 24px; border-bottom: 1px solid #eee; padding: 21px; margin-bottom: 20px; } .chongzhi{ float: right; } .cash_bt{ float: right; margin-left: 10px; } .chongzhi .el-button--danger{
      margin-top: 0px; } .cash_img{ max-width: 100%; } .sold_pkg{ padding: 10px 10px; box-sizing: border-box; border-bottom: 1px solid #eee; background:#f8f8f8; } .sold_pkg_img{ float: left; width: 60px; margin-right: 10px; } .order_msg_input{ float: left; margin-left: 20px; width: 85%; } .sold_detail_title{ font-size: 14px; padding-top: 10px; color: #666; } .sold_detail_bg1{ background:#f15151; } .sold_detail_bg2{ background:#f15151; } .sold_detail_status{ font-size:14px; color:#fff; padding:20px; margin-top:15px; margin-bottom:15px; } .iframe-content{ width: 375px; height: 600px; border: 1px solid #eee; } .tag-copy { font-size: 10px; padding: .2em .5em; line-height: normal; border-radius: .2em; display: inline-block; color: rgb(150, 151, 153); margin-left: 10px; border: 1px solid #eee; float: left; margin-top: 8px; } .refound-reason{margin-top:10px;} .refound-reason .el-select{width:100%;} .refound-reason .reason-title{line-height:40px;font-size:14px;} .sold-detail-infor{font-size:14px;margin-top:20px;color:#666666;line-height:40px;} .sold-detail-infor img{width:80px;height:80px;margin-right:10px;border:1px solid #f8f8f8;} .marginTop{margin-top:20px;} .rateTitle{font-size:14px;color:#666666;} .evaluateTitle{font-size:14px;color:#999999;padding:10px 0;border-bottom:1px solid #f8f8f8;} .evaluateGoods{font-size:14px;color:#666666;padding:10px 0;border-bottom:1px solid #f8f8f8;line-height:50px;} .evaluateGoods img{width:50px;height:50px;border:1px solid #f8f8f8;} .upload-front{position:absolute;top:0;left:18px;width:40%;height:130px;opacity:0;} .upload-back{position:absolute;top:0;left:46%;width:40%;height:130px;opacity:0;} .evaluateImg img{width:200px;margin-bottom:10px;} .infor-right{ flex: 1; display: flex; } .fx{ flex: 1; text-align: center; border-left: 1px solid #eee; margin-top: 45px; font-size: 14px; height: 125px; } .el-carousel__item{ text-align: center; } .photos-img{ max-width: 100%; max-height: 100%; } .label_dialog{ width: 100%; padding: 5px 15px; box-sizing: border-box; height: 500px; overflow-y: scroll; } .label_dialog::-webkit-scrollbar { width: 4px; /*height: 4px;*/ } .label_dialog::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.2); } .label_dialog::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 0; background: rgba(0,0,0,0.1); } .label_item{ padding: 5px 0px; box-sizing: border-box; width: 100%; display: flex; border-bottom: 1px solid #eee; } .order-content{ padding: 15px 10px; } .order-sn{ background-color:#f6f6f6; font-size: 16px; font-weight: bold; padding: 8px 15px; line-height: 30px; border-top: 1px solid #ededed; border-left: 1px solid #ededed; border-right: 1px solid #ededed; } .order-steps{ border: 1px solid #ededed; padding: 40px 20px 30px; } .order-table{ margin-top: 20px; display: flex; } .order-title{ padding: 10px; border: 1px solid #ededed; background-color:#f6f6f6; font-size: 16px; font-weight: bold; background-color: #f6f6f6; } .order-title2{ padding: 10px; border-left: 1px solid #ededed; border-right: 1px solid #ededed; border-top: 1px solid #ededed; background-color:#f6f6f6; font-size: 16px; font-weight: bold; background-color: #f6f6f6; margin-top: 20px; } .order-tr{ padding: 10px; border-left: 1px solid #ededed; border-right: 1px solid #ededed; border-bottom: 1px solid #ededed; font-size: 14px; height: 20px; } .order-tr-copy{ color: #59a8ff; margin-left: 10px; cursor: pointer; } .el-button--mini{ padding: 5px; margin-top: 3px; display: block; } .el-button+.el-button{ margin-left: 0px; }</style>
    <div id="member">
      <div class="main_con">
        <div class="allwarp">
          <div class="breadcrumbs">
            <ul class="clearfix">
              <li class="home">
                <a title="首页">首页</a>
                <span>&nbsp;&nbsp;&gt;&nbsp;&nbsp;</span></li>
              <li class="home">
                <a title="会员中心">会员中心</a>
                <span>&nbsp;&nbsp;&gt;&nbsp;&nbsp;</span></li>
            </ul>
          </div>
        </div>
        <div class="allwarp">
          <div class="member_warp">
            #include("member_menu.html")
			<div class="mem_right">
			  <input type="hidden" id="orderId" value="#(order.id)">
			  <div class="order-content">
			    <div class="order-sn">
			      <div class="fl">订单号：#(order.sn)</div>
			      <!---->
			      <!---->
			      <!---->
			      <!---->
			      <!---->
			        #if(order.status=="PENDING_PAYMENT")
			        
			        <button type="button" class="el-button fr el-button--danger el-button--small" style="margin-left: 10px;" id="cancelOrder">
			        <!---->
			        <!---->
			        <span>取消支付</span></button>
			        
			        <button type="button" class="el-button fr el-button--danger el-button--small" style="margin-left: 10px;" onclick="location.href='#(base)/order/payment?orderId=#(order.id)'">
			        <!---->
			        <!---->
			        <span>付款<span id="countdownHour2">00</span>:<span id="countdownMinute2">00</span>:<span id="countdownSecond2">00</span></span></button>
			        
			        #else if(order.status=="PENDING_SHIPMENT")
			        
			        <button type="button" class="el-button fr el-button--danger el-button--small" style="margin-left: 10px;" id="refundOrder">
			        <!---->
			        <!---->
			        <span>申请退款</span></button>
			        
			        #else if(order.status=="SHIPPED")
			        
			        <button type="button" class="el-button fr el-button--danger el-button--small" style="margin-left: 10px;" id="completeOrder">
			        <!---->
			        <!---->
			        <span>确认收货</span></button>
			        
			        #else if(order.status=="CANCELED")
			      <button type="button" class="el-button fr el-button--danger el-button--small" style="margin-left: 10px;" id="deleteOrder">
			        <!---->
			        <!---->
			        <span>删除订单</span></button>
			        
			        #end
			        
			        
			      <div class="cl"></div>
			    </div>
			    <div class="order-steps">
			      <div class="el-steps el-steps--horizontal">
			        <div class="el-step is-horizontal" style="flex-basis: 33.3333%; margin-right: 0px;">
			          <div class="el-step__head is-finish">
			            <div class="el-step__line" style="margin-right: 0px;">
			              <i class="el-step__line-inner" style="transition-delay: 0ms; #if(order.payDate??) border-width: 1px; width: 100%; #else border-width: 0px; width: 0%; #end"></i>
			            </div>
			            <div class="el-step__icon is-text">
			              <!---->
			              <div class="el-step__icon-inner">1</div></div>
			          </div>
			          <div class="el-step__main">
			            <div class="el-step__title is-finish">下单</div>
			            <div class="el-step__description is-finish">#date(order.createDate,'yyyy-MM-dd HH:mm:ss')</div></div>
			        </div>
			        <div class="el-step is-horizontal" style="flex-basis: 33.3333%; margin-right: 0px;">
			          <div class="el-step__head #if(order.payDate??) is-finish #else is-wait #end">
			            <div class="el-step__line" style="margin-right: 0px;">
			              <i class="el-step__line-inner" style="transition-delay: -150ms; #if(order.deliverDate??) border-width: 1px; width: 100%; #else border-width: 0px; width: 0%; #end"></i>
			            </div>
			            <div class="el-step__icon is-text">
			              <!---->
			              <div class="el-step__icon-inner">2</div></div>
			          </div>
			          <div class="el-step__main">
			            <div class="el-step__title #if(order.payDate??) is-finish #else is-wait #end">已支付待发货</div>
			            <div class="el-step__description #if(order.payDate??) is-finish #else is-wait #end">#date(order.payDate,'yyyy-MM-dd HH:mm:ss')</div>
			          </div>
			        </div>
			        <div class="el-step is-horizontal" style="flex-basis: 33.3333%; margin-right: 0px;">
			          <div class="el-step__head #if(order.deliverDate??) is-finish #else is-wait #end">
			            <div class="el-step__line" style="margin-right: 0px;">
			              <i class="el-step__line-inner" style="transition-delay: -300ms; #if(order.completeDate??) border-width: 1px; width: 100%; #else border-width: 0px; width: 0%; #end"></i>
			            </div>
			            <div class="el-step__icon is-text">
			              <!---->
			              <div class="el-step__icon-inner">3</div></div>
			          </div>
			          <div class="el-step__main">
			            <div class="el-step__title #if(order.deliverDate??) is-finish #else is-wait #end">已发货</div>
			            <div class="el-step__description #if(order.deliverDate??) is-finish #else is-wait #end">#date(order.deliverDate,'yyyy-MM-dd HH:mm:ss')</div>
			          </div>
			        </div>
			        <div class="el-step is-horizontal is-flex" style="flex-basis: 33.3333%; max-width: 25%;">
			          <div class="el-step__head #if(order.completeDate??) is-finish #else is-wait #end">
			            <div class="el-step__line">
			              <i class="el-step__line-inner"></i>
			            </div>
			            <div class="el-step__icon is-text">
			              <!---->
			              <div class="el-step__icon-inner">4</div></div>
			          </div>
			          <div class="el-step__main">
			            <div class="el-step__title #if(order.completeDate??) is-finish #else is-wait #end">交易成功</div>
			            <div class="el-step__description #if(order.completeDate??) is-finish #else is-wait #end">#date(order.completeDate,'yyyy-MM-dd HH:mm:ss')</div>
			          </div>
			        </div>
			      </div>
			    </div>
			    <div class="order-table">
			      <div style="flex: 1 1 0%;">
			        <div class="order-title">订单信息</div>
			        <div class="order-tr">订单编号：#(order.sn)
			          <span data-clipboard-action="copy" id="copy_btn" class="order-tr-copy" data-clipboard-text="ODL62802201992">复制</span></div>
			        <div class="order-tr">下单时间：#date(order.createDate,"yyyy-MM-dd HH:mm:ss")</div>
			        <div class="order-tr">支付方式：#(order.paymentMethodName)</div>
			        <div class="order-tr">订单总额：￥ #(order.amount)</div>
			        <div class="order-tr"></div>
			      </div>
			      <div style="flex: 1 1 0%; margin-left: 15px;">
			        <div class="order-title">优惠信息</div>
			        <div class="order-tr">活动优惠：￥ #(order.activityPrice??"0.00")</div>
			        <div class="order-tr">优惠券：￥ #(order.couponPrice??"0.00")</div>
			        <!-- <div class="order-tr">手续费：￥ 0.00</div>
			        <div class="order-tr">增值服务：￥ 0.00</div> -->
			        <div class="order-tr"></div>
			      </div>
			      <div style="flex: 1 1 0%; margin-left: 15px;">
			        <div class="order-title">支付信息</div>
			        <div class="order-tr">商品总价：￥ #(order.productTotalPrice)</div>
			        <div class="order-tr">运费：￥ #(order.freightPrice??"0.00")</div>
			        <div class="order-tr">优惠总额：-￥ #(order.discountPrice??"0.00")</div>
			        <div class="order-tr">应付总额：￥ #(order.amount)</div>
			      </div>
			    </div>
			    <div class="order-title2">商品列表
			      <div class="fr" style="font-weight: 400;">共#(order.totalQuantity)件
			        <span>合计：￥ #(order.amount)</span></div>
			      <div class="cl"></div>
			    </div>
			    <div class="el-table el-table--fit el-table--border el-table--enable-row-hover el-table--enable-row-transition" header-align="center" style="width: 100%;">
			      <div class="hidden-columns">
			        <div></div>
			        <div></div>
			        <div></div>
			        <div></div>
			        <div></div>
			        <div></div>
			      </div>
			      <div class="el-table__header-wrapper">
			        <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 987px;">
			          <thead class="has-gutter">
			            <tr class="">
			              <th colspan="1" rowspan="1" class="el-table_2_column_7     is-leaf">
			                <div class="cell">图片</div></th>
			              <th colspan="1" rowspan="1" class="el-table_2_column_8     is-leaf">
			                <div class="cell">产品名称</div></th>
			              <th colspan="1" rowspan="1" class="el-table_2_column_9     is-leaf">
			                <div class="cell">规格</div></th>
			              <th colspan="1" rowspan="1" class="el-table_2_column_10     is-leaf">
			                <div class="cell">单价(￥ )</div></th>
			              <th colspan="1" rowspan="1" class="el-table_2_column_11     is-leaf">
			                <div class="cell">数量</div></th>
			              <th colspan="1" rowspan="1" class="el-table_2_column_12     is-leaf">
			                <div class="cell">总价(￥ )</div></th>
			              <th class="gutter" style="width: 0px; display: none;"></th>
			            </tr>
			          </thead>
			        </table>
			      </div>
			      <div class="el-table__body-wrapper is-scrolling-none">
			        <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 987px;">
			          <tbody>
			          
			            #for(orderItem : order.orderItems)
			            <tr class="el-table__row">
			              <td rowspan="1" colspan="1" class="el-table_2_column_7  ">
			                <div class="cell">
			                  <img src="#(imageUrl(orderItem.image))" style="width: 40px;"></div>
			              </td>
			              <td rowspan="1" colspan="1" class="el-table_2_column_8  ">
			                <div class="cell">#(orderItem.name)</div></td>
			              <td rowspan="1" colspan="1" class="el-table_2_column_9  ">
			                <div class="cell"></div>
			              </td>
			              <td rowspan="1" colspan="1" class="el-table_2_column_10  ">
			                <div class="cell">#(orderItem.price)</div></td>
			              <td rowspan="1" colspan="1" class="el-table_2_column_11  ">
			                <div class="cell">#(orderItem.quantity)</div></td>
			              <td rowspan="1" colspan="1" class="el-table_2_column_12  ">
			                <div class="cell">#(orderItem.subtotal)</div></td>
			            </tr>
			            #end
			            
			            
			            <!----></tbody>
			        </table>
			        <!---->
			        <!----></div>
			      <!---->
			      <!---->
			      <!---->
			      <!---->
			      <div class="el-table__column-resize-proxy" style="display: none;"></div>
			    </div>
			    
			    #if(order.status=="SHIPPED")
			    <div class="order-title2">包裹列表</div>
			    <div class="el-table el-table--fit el-table--border el-table--enable-row-hover el-table--enable-row-transition" header-align="center" style="width: 100%;">
				  <div class="el-table__header-wrapper">
				    <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 987px;">
				      <thead class="has-gutter">
				        <tr class="">
				          <th colspan="1" rowspan="1" class="el-table_2_column_7     is-leaf">
				            <div class="cell">快递单号</div></th>
				          <th colspan="1" rowspan="1" class="el-table_2_column_8     is-leaf">
				            <div class="cell">收货人信息</div></th>
				          <th colspan="1" rowspan="1" class="el-table_2_column_9     is-leaf">
				            <div class="cell">产品名称</div></th>
				          <!-- <th colspan="1" rowspan="1" class="el-table_2_column_10     is-leaf">
				            <div class="cell">总价(￥ )</div></th> -->
				          <th colspan="1" rowspan="1" class="el-table_2_column_11     is-leaf">
				            <div class="cell">操作</div></th>
				          <th class="gutter" style="width: 0px; display: none;"></th>
				        </tr>
				      </thead>
				    </table>
				  </div>
				  <div class="el-table__body-wrapper is-scrolling-none">
				    <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 987px;">
				      <tbody>
				        #for(pack : packs)
				        #for(packProduct : pack.packProducts)
				        <tr class="el-table__row">
				          #if(for.outer.index==0)
				          <td rowspan="#(pack.packProducts.size())" colspan="1" class="el-table_2_column_7  ">
				            <div class="cell">
				              <div>#(pack.expressNumber)<br>#(pack.expressCode)
				                <span class="order-tr-copy">复制</span></div>
				              <!----></div>
				          </td>
				          #end
				          <td rowspan="1" colspan="1" class="el-table_2_column_8  ">
				            <div class="cell">
				              <div>#(order.consignee),#(order.phone),#(order.province)#(order.city)#(order.district)#(order.address)</div></div>
				          </td>
				          <td rowspan="1" colspan="1" class="el-table_2_column_9  ">
				            <div class="cell">#(packProduct.product.name)</div></td>
				          <!-- <td rowspan="1" colspan="1" class="el-table_2_column_10  ">
				            <div class="cell">145.17</div></td> -->
				            #if(for.outer.index==0)
				          <td rowspan="#(pack.packProducts.size())" colspan="1" class="el-table_2_column_11  ">
				            <div class="cell">
				              <button type="button" class="el-button el-button--default el-button--mini wuliubutton" packId="#(pack.id)">
				                <!---->
				                <!---->
				                <span>物流</span></button>
				                
				                <button type="button" class="el-button el-button--default el-button--mini photobutton" packId="#(pack.id)">
				                <!---->
				                <!---->
				                <span>打包照片</span></button>
				              <!-- <button type="button" class="el-button el-button--default el-button--mini">
				               
				               
				                <span>面单</span></button>
				              <button type="button" class="el-button el-button--default el-button--mini" data-clipboard-text="申通5530262288753" data-clipboard-action="copy" id="copy_btn">
				               
				               
				                <span>复制面单号</span></button> -->
				              <!---->
				              <!---->
				              <!----></div>
				          </td>
				          #end
				        </tr>
				        #end
				        #end
				        <!----></tbody>
				    </table>
				    <!---->
				    <!----></div>
				  <!---->
				  <!---->
				  <!---->
				  <!---->
				  <div class="el-table__column-resize-proxy" style="display: none;"></div>
				</div>
				#end
			    
			    <!---->
			    <!----></div>
			</div>
            <div class="cl"></div>
          </div>
        </div>
        
        <div class="el-dialog__wrapper pop-logist" style="z-index: 2007;display: none;" id="photoDiv">
		  <div role="dialog" aria-modal="true" aria-label="dialog" class="el-dialog" style="margin-top: 15vh; width: 40%;">
		    <div class="el-dialog__header">
		      <span class="el-dialog__title"></span>
		      <button type="button" aria-label="Close" class="el-dialog__headerbtn">
		        <i class="el-dialog__close el-icon el-icon-close" id="photoDivClose"></i>
		      </button>
		    </div>
		    <div class="el-dialog__body" id="photoBody">
		    
		    
		      
		      
		      
		    </div>
		    <!----></div>
		</div>
        
        <div class="el-dialog__wrapper pop-logist" style="z-index: 2007;display: none;" id="wuliuDiv">
		  <div role="dialog" aria-modal="true" aria-label="dialog" class="el-dialog" style="margin-top: 15vh; width: 40%;">
		    <div class="el-dialog__header">
		      <span class="el-dialog__title"></span>
		      <button type="button" aria-label="Close" class="el-dialog__headerbtn">
		        <i class="el-dialog__close el-icon el-icon-close" id="wuliuDivClose"></i>
		      </button>
		    </div>
		    <div class="el-dialog__body" id="wuliuBody">
		    
		    
		      
		      
		      
		    </div>
		    <!----></div>
		</div>
        
      <div class="el-loading-mask is-fullscreen" style="display: none;background-color: rgba(0, 0, 0, 0.7); z-index: 2002;" id="showloading">
		  <div class="el-loading-spinner">
		    <svg viewBox="25 25 50 50" class="circular">
		      <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
		    </svg>
		    <p class="el-loading-text">加载中……</p></div>
		</div>
        
        <div class="v-modal" tabindex="0" id="dialogModal" style="display: none;z-index: 2004;"></div>
        
      </div>
    </div>
    #include("footer.html")
  </body>

</html>
<script type="text/javascript">
$(".photobutton").on("click",function(){
	var packId = $(this).attr("packId");
	var orderId = $("#orderId").val();
	$("#showloading").show();
	$.ajax({
        url: "#(base)/member/order/photo",
        type: "post",
        data: {"orderId":orderId,"packId":packId},
        dataType: "text",
        success: function(res){
        	$("#showloading").hide();
        	$("#photoBody").html(res);
        	$("#photoDiv").show();
        	$("#dialogModal").show();
        },
        error: function(res){
        	$("#showloading").hide();
        }
    });
});

$("#photoDivClose").on("click",function(){
	$("#photoDiv").hide();
	$("#dialogModal").hide();
});

$(".wuliubutton").on("click",function(){
	var packId = $(this).attr("packId");
	var orderId = $("#orderId").val();
	$("#showloading").show();
	$.ajax({
        url: "#(base)/member/order/traffic",
        type: "post",
        data: {"orderId":orderId,"packId":packId},
        dataType: "text",
        success: function(res){
        	$("#showloading").hide();
        	$("#wuliuBody").html(res);
        	$("#wuliuDiv").show();
        	$("#dialogModal").show();
        },
        error: function(res){
        	$("#showloading").hide();
        }
    });
});

$("#wuliuDivClose").on("click",function(){
	$("#wuliuDiv").hide();
	$("#dialogModal").hide();
});


$("#deleteOrder").on("click",function(){
	if(confirm("确定要删除吗?")){
		var orderId = $("#orderId").val();
		$.ajax({
	        url: "#(base)/order/delete",
	        type: "post",
	        data: {"orderId":orderId},
	        dataType: "json",
	        success: function(res){
	        	if(res.type=="success"){
	       			location.href="#(base)/member/order/list"
	       		}
	        },
	        error: function(res){
	        }
	    });
	}
});

$("#cancelOrder").on("click",function(){
	if(confirm("确定要取消吗?")){
		var orderId = $("#orderId").val();
		$.ajax({
	        url: "#(base)/order/cancel",
	        type: "post",
	        data: {"orderId":orderId},
	        dataType: "json",
	        success: function(res){
	        	if(res.type=="success"){
	       			location.href="#(base)/member/order/list"
	       		}
	        },
	        error: function(res){
	        }
	    });
	}
});

$("#refundOrder").on("click",function(){
	if(confirm("确定要申请退款吗?")){
		var orderId = $("#orderId").val();
		$.ajax({
	        url: "#(base)/order/refund",
	        type: "post",
	        data: {"orderId":orderId},
	        dataType: "json",
	        success: function(res){
	        	if(res.type=="success"){
	       			location.href="#(base)/member/order/list"
	       		}
	        },
	        error: function(res){
	        }
	    });
	}
});

$("#completeOrder").on("click",function(){
	var orderId = $("#orderId").val();
	$.ajax({
        url: "#(base)/order/receive",
        type: "post",
        data: {"orderId":orderId},
        dataType: "json",
        success: function(res){
        	if(res.type=="success"){
       			location.href="#(base)/member/order/list"
       		}
        },
        error: function(res){
        }
    });
});
$("#payBtn").on("click",function(){
	$("#dialogModal").show();
	if($("#qrImg").attr("src")!=""){
		$("#payDiv").show();
		return;
	}
	var orderId = $("#orderId").val();
	location.href="#(base)/order/payment?orderId="+orderId;
});

</script>
<script>
 function orderExpire(){
	// 当前时间
	     var nowTime = new Date();
		// 2016/12/22 hh:mm:ee
		// 结束时间
		var endTime = new Date("#date(order.expireDate,'yyyy/MM/dd HH:mm:ss')");
	// 相差的时间	
	var t = endTime.getTime() - nowTime.getTime();
	if(t<=0){
		var orderId = $("#orderId").val();
		$.ajax({
	        url: "#(base)/order/cancel",
	        type: "post",
	        data: {"orderId":orderId},
	        dataType: "json",
	        success: function(res){
	        	if(res.type=="success"){
	       			location.reload();
	       		}
	        },
	        error: function(res){
	        }
	    });
		return false;
	}

	var d = Math.floor(t/1000/60/60/24);
	
	var h = Math.floor(t/1000/60/60%24);
	var i = Math.floor(t/1000/60%60);
	var s = Math.floor(t/1000%60);
	if(h<10){
		h="0"+h;
	}
	if(i<10){
		i="0"+i;
	}
	if(s<10){
		s="0"+s;
	}
	/* document.getElementById('countdownDay').innerHTML = d; */
	document.getElementById('countdownHour2').innerHTML = d*24+h;
	document.getElementById('countdownMinute2').innerHTML = i;
	document.getElementById('countdownSecond2').innerHTML = s;

	setInterval(orderExpire, 1000);
} 
 #if(order.status=="PENDING_PAYMENT")
 orderExpire();
 #end
</script>